<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表过滤——watch实现</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="root">
        <!-- 遍历数组 -->
        <h1>遍历数组</h1>
        <input type="text" placeholder="请输入名字" v-model="keyWords">
        <ul>
            <li v-for="(person, index) in filPerson" :key="index">
                {{person.name}}-{{person.age}}-{{person.sex}}
            </li>
        </ul>

    </div>
</body>

<script>
    new Vue({
        el: "#root",
        data: {
            keyWords: "",
            persons: [
                {id: 1, name: "马冬梅", age: 18, sex: "女"},
                {id: 2, name: "周冬雨", age: 19, sex: "女"},
                {id: 3, name: "周杰伦", age: 20, sex: "男"},
                {id: 3, name: "温兆伦", age: 22, sex: "男"},
            ],
            filPerson: []
        },
        watch: {
            keyWords: {
                immediate: true,  // 自动执行一次
                handler(val){
                    this.filPerson = this.persons.filter((p) => {
                        return p.name.indexOf(val) !== -1
                    })
                }
            }
        }
    })
</script>
</html>